<template>
  <div class="user_con_box clearfix inConbox">
    <div class="user_con_top dipW">
      <section class="user_con_ifon dip ju_al" @click="getUserIfondetilsta()">
        <span class="user_con_ifonImg bdrb">
          <img :src="userifon.picture" alt="" class="bdrb">
        </span>
        <section class="user_con_ifonBox dip ju_al_bet">
          <p class="user_con_ifonBoxtitle dipW ju_al_lf">
            <span class="user_con_ifontitleTop dip ju_al_lf">
              <!-- <i class="user_con_ifontext" v-if="userifon.nickName != null || userifon.name != undefined">{{userifon.name}}</i>
              <i class="user_con_ifontext" v-else-if="userifon.name != null || userifon.name != undefined">{{userifon.name}}</i> -->
              <i class="user_con_ifontext" v-if="userifon.nickName != ''">{{userifon.nickName}}</i>
              <i class="user_con_ifontext" v-else-if="userifon.name != '' ">{{userifon.name}}</i>
              <i class="user_con_ifontext" v-else>{{userifon.phoneNumber}}</i>
              <img src="../../../static/images/userifon/user_ifon_cysn.png" alt="" class="user_con_ifontextIMG" v-if="userifon.certificationLevel == '1'">
              <img src="../../../static/images/userifon/user_ifon_cys.png" alt="" class="user_con_ifontextIMG" v-if="userifon.certificationLevel == '2'">
              <!-- <img src="../../../static/images/userifon/user_ifon_cys.png" alt="" class="user_con_ifontextIMG" v-if="userifon.userType == 'CYS' || userifon.userType == 'SC'"> -->
            </span>
            <span class="user_con_ifontitlebom dip ju_al_lf" v-if="userifon.userType == 'CJ'">(游客)</span>
            <span class="user_con_ifontitlebom dip ju_al_lf" v-else-if="userifon.userType == 'SJ'">(商家)</span>
            <span class="user_con_ifontitlebom dip ju_al_lf" v-else-if="userifon.userType == 'CYS'">(创意师)</span>
            <!-- <span class="user_con_ifontitlebom dip ju_al_lf" v-else-if="userifon.userType == 'SC'">(商家和创意师)</span> -->
            <span class="user_con_ifontitlebom dip ju_al_lf" v-else-if="userifon.userType == 'SC'">(创意师)</span>
          </p>
          <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
        </section>
      </section>
      <ol class="user_con_OLlist dip ju_al_bet">
        <li class="user_con_OLitem dipW ju_al" v-for="(iems,ind) in ifonitems" :key="ind" @click="userifonURl(iems.url)">
          <span  class="user_con_OLIMG dip ju_al">
            <img :src="'./static/images/userifon/'+iems.img+''" alt="">            
          </span>
          <span class="user_con_OLtext">{{iems.text}}<i class="user_con_OLnumber" v-if="iems.blobk && noReadingNums != 0">({{noReadingNums}})</i> </span>
        </li>
      </ol>
    </div>
    <ul class="user_con_listbom dipW clearfix">
      <li class="user_con_bomitems dip ju_al" v-for="(ulites,index) in typeItems" :key="index" @click="userifonURl(ulites.url)">
        <span class="user_con_bomitemsImg dip ju_al_lf">
          <img :src="'./static/images/userifon/'+ulites.img+''" alt="">
        </span>
        <span class="user_con_bomitemstext dip ju_al_bet">
          <i class="user_con_font">{{ulites.text}}</i>
          <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      userifon:'',//个人信息
      ifonitems:[ //选项
        {
          img:'uuer_ifon_order.png',
          text:'订单管理',
          url:'/bomNav/orderAdm',
          blobk:false
        }
        ,{
          img:'user_ifon_addtask.png',
          text:'我发布的任务',
          url:'/bomNav/startTask/issue',
          blobk:false          
        }
        ,{
          img:'user_ifon_task.png',
          text:'我参加的任务',
          url:'/bomNav/startTask/join',
          blobk:false          
        }
        ,{
          img:'user_ifon_xinxi.png',
          text:'消息',
          url:'/bomNav/userIfoncontent',
          blobk:true          
        }
      ],
      typeItems:[ //选项2
        {
          img:'user_yue.png',
          text:'余额',
          url:'/bomNav/userbalance',
        }
        , {
          img:'user_bans.png',
          text:'帮助中心',
          url:'/bomNav/heipcontent',
        }
        , {
          img:'user_jian.png',
          text:'意见反馈',
          url:'/bomNav/userOpinion',
        }
        , {
          img:'user_jian.png',
          text:'邀请',
          url:'/bomNav/userShare',
        }
        , {
          img:'user_jian.png',
          text:'我的邀请',
          url:'/bomNav/userInvite',
        }
      ],
      noReadingNums:'',
    }
  },
  methods:{
    getUserIfondetilsta(){
      if(this.userifon != ''){
        if(this.userifon.userType == 'CJ' || this.userifon.userType == 'SJ'){
          this.$router.push({
            path:'/bomNav/userIfon'
          })
        }else if(this.userifon.userType == 'CYS' || this.userifon.userType == 'SC'){
          this.$router.push({
            path:'/bomNav/userCearshi'
          })
        }
      }else{
        alert('请登陆')
      }
    },
    userifonURl(url){ //选项一
      this.$router.replace({
       path:url
      })
    },
    getUserifon(){
      //判断用户 登录
        // if(this.$store.getters.showuserifon){
          this.$store.dispatch('showloader')
          console.log('dioa',sessionStorage.getItem('token'))
          this.axios.post(this.$busPoat.userInfo(),{},{
            headers:{Authorization:sessionStorage.getItem('token')}
          }).then(response=>{
            sessionStorage.setItem('balance',JSON.stringify(response.data))
            var userifonFG = JSON.parse(sessionStorage.getItem('balance'))
            console.log(response.data)
            var st;
            clearTimeout(st)
            st = setTimeout(() =>{
              if(response != null || response != undefined){
                this.userifon = userifonFG.user
                this.$store.dispatch('hideloader')
                this.$store.dispatch('hideuserifonS')
              }else{
                this.$store.dispatch('hideloader')
                alert('请求加载过慢...')
                this.$store.dispatch('hideuserifonS')
              }
              clearTimeout(st)                                                                       
            },1000)
          }).catch(error=>{
            this.$store.dispatch('hideloader')
            alert('获取用户信息失败')
          })
        // }else{
        //   var userifon = JSON.parse(sessionStorage.getItem('balance'))
        //   this.userifon = userifon.user
        // }

    },
    getcontentifonViweNum(){
      this.axios.post(this.$busPoat.viewNum(),{}).then(response=>{
        this.noReadingNums =response.data.noReadingNums   
      }).catch(error=>{
        alert('获取消息失败')
      })
    }
   
  },
  created(){
    this.getUserifon()
    this.getcontentifonViweNum()
  }
}
</script>
<style lang="scss" scoped>
.user_con_box{
  background: #f2f2f2;
}
.user_con_top{
  width: 100%;
  height: 3.84rem;
  padding:0rem .4rem;
  background: #fff;
  margin-bottom:.1rem;
  .user_con_ifon{
    width: 100%;
    border-bottom:.02rem solid #f2f2f2;
    height: 2.02rem;
    .user_con_ifonImg{
      width: 20.9%;
      max-width: 1.4rem;
      height: 1.4rem;
      border:0;
      // background: #ff6600;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .user_con_ifonBox{
      width: 79.1%;
      height: 100%;
      padding-left:9%;
      .user_con_ifonBoxtitle{
        height: 100%;
        padding:.6rem 0rem;
        width: 80%;
        span{
          width: 100%;
          height: 50%;
        }
        .user_con_ifontitleTop{
          .user_con_ifontext{
            color:#333;
            // width: 1.14rem;
            font-size: .28rem;
            font-weight: 600;
            margin-right:.2rem;
          }
          .user_con_ifontextIMG{
            width: 1rem;
            height: 0.35rem;
          }
        }
        .user_con_ifontitlebom{
          font-size: .24rem;
          color:#999;
        }
      }
    }
  }
  .user_con_OLlist{
    height: 1.84rem;
    width: 100%;
    padding:.4rem 0rem;
    .user_con_OLitem{
      width: 25%;
      height: 100%;
      color:#999;
      font-size: .22rem;
      .user_con_OLIMG{
        width: 100%;
        height: 70%;
        img{
            width: 34.63%;
            height: 79.69%;
        }
      }
      .user_con_OLtext{
        height: 30%;        
        margin-top:.05rem;
        .user_con_OLnumber{
          color:#FF7200;
        }
      }
    }
  }
}
.user_con_ifonBoxjiantou{
  width: 0.15rem;
  height: 0.3rem;
  margin-right: .2rem;
}
.user_con_listbom{
  width: 100%;
  background: #fff;  
  padding:0rem .4rem;
  .user_con_bomitems{
    width: 100%;
    height: 1rem;
    border-bottom:.02rem solid #f2f2f2;
    .user_con_bomitemsImg{
      width: 1.2rem;
      max-width:17.914%;
      height: 0.6rem;
      img{
        width: 0.6rem;
        height: 0.6rem;
      }
    }
    .user_con_bomitemstext{
       width:82%;
       height: 100%;
      .user_con_font{
        font-size: .28rem;
        color:#666;
        font-weight: bold;
      }
    }
  }
}
</style>

